<template>
  <div>
    <!-- {{ params }} -->
    <el-form :inline="true">
      <el-form-item label="搜索">
        <el-input placeholder="请搜索内容" style="width: 220px;" v-model="params.searchValue" clearable> </el-input>
      </el-form-item>
      <el-form-item label="分类">
        <el-select clearable placeholder="请选择分类" style="width: 120px;" v-model="params.type">
          <el-option v-for="(v, i) in types" :key="i" :label="v" :value="v"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="评分区间：">
        <el-input clearable placeholder="请输入最低分" style="width: 130px;" v-model="params.minScore"></el-input>-
        <el-input clearable placeholder="请输入最高分" style="width: 130px;" v-model="params.maxScore"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="danger">重置</el-button>
        <el-button type="primary" @click="_getList">确定</el-button>
      </el-form-item>
    </el-form>
    <el-button type="danger" @click="handleDeleteSelect">多选删除</el-button>
    <el-table :data="list" @selection-change="selectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column type="expand">
        <template #default="scope">
          <div style="padding-left: 100px;background-color: #f2f2f2;">
            <el-row>
              <el-col :span="12" class="text-item">
                <span>店铺名称：{{ scope.row.shopName }}</span>
              </el-col>
              <el-col :span="12" class="text-item">
                <span>店铺地址：{{ scope.row.shopAddress }}</span>
              </el-col>
              <el-col :span="12" class="text-item">
                <span>店铺介绍：{{ scope.row.shopDescription }}</span>
              </el-col>
              <el-col :span="12" class="text-item">
                <span>店铺ID：{{ scope.row.id }}</span>
              </el-col>
              <el-col :span="12" class="text-item">
                <span>联系电话: {{ scope.row.shopTel }}</span>
              </el-col>
              <el-col :span="12" class="text-item">
                <span>评分: {{ scope.row.shopScore }}</span>
              </el-col>
              <el-col :span="12" class="text-item">
                <span>销售量: {{ scope.row.shopSellCount }}</span>
              </el-col>
              <el-col :span="12" class="text-item">
                <span>分类: {{ scope.row.shopType }}</span>
              </el-col>
            </el-row>
          </div>

        </template>
      </el-table-column>
      <el-table-column label="ID" prop="id"></el-table-column>
      <el-table-column label="店铺名称" prop="shopName"></el-table-column>
      <el-table-column label="店铺照片" prop="shopImage">
        <template #default="scope">
          <el-image :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[scope.row.shopImage]"
            :src="scope.row.shopImage" alt="" style="height: 40px;" fit="cover" :hide-on-click-modal="true"
            :z-index="999" :teleported="true" :preview-teleported="true" />
        </template>
      </el-table-column>
      <el-table-column label="店铺地址" prop="shopAddress"></el-table-column>
      <el-table-column label="店铺描述" prop="shopDescription"></el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-button type="primary" @click="openDialog(false, scope.row)">编辑</el-button>
          <el-button type="info" @click="openDialog(true)">添加</el-button>
          <el-button type="danger" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination v-model:current-page="pageConfig.pageCode" v-model:page-size="pageConfig.pageSize" background
      layout="total, sizes, prev, pager, next, jumper" :total="total" style="margin-top: 10px;" @change="_getList"
      :page-sizes="[10, 20, 30, 40]" />

    <!-- 弹框 -->

    <el-dialog v-model="visible" :title="title">
      <el-form>
        <el-form-item label="店铺名称">
          <el-input placeholder="请输入店铺名称" v-model="formDataDialog.shopName"></el-input>
        </el-form-item>
        <el-form-item label="店铺地址">
          <el-input placeholder="请输入店铺地址" v-model="formDataDialog.shopAddress"></el-input>
        </el-form-item>
        <el-form-item label="店铺描述">
          <el-input placeholder="请输入店铺描述" v-model="formDataDialog.shopDescription"></el-input>
        </el-form-item>
        <el-form-item label="联系方式">
          <el-input placeholder="请输入联系方式" v-model="formDataDialog.shopTel"></el-input>
        </el-form-item>
        <el-form-item label="店铺评分">
          <el-input placeholder="请输入店铺评分" v-model="formDataDialog.shopScore"></el-input>
        </el-form-item>
        <el-form-item label="店铺销售量">
          <el-input placeholder="请输入店铺销售量" v-model="formDataDialog.shopSellCount"></el-input>
        </el-form-item>
        <el-form-item label="店铺类型">
          <el-select placeholder="请输入店铺类型" v-model="formDataDialog.shopType">
            <el-option v-for="(v, i) in types" :key="i" :label="v" :value="v"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="店铺照片">
          <el-input placeholder="请输入店铺照片" v-model="formDataDialog.shopImage"></el-input>
        </el-form-item>


      </el-form>


      <template #footer>
        <el-button type="danger" @click="closeDialog">取消</el-button>
        <el-button type="primary" @click="handleOk">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import axios from 'axios';
import { ElMessage } from 'element-plus';
import { ref } from 'vue'
const types = ["生鲜", "水果", "冷饮", "甜品", "鲜花"]
interface ListItemSate {
  "id": string,
  "shopName": string,
  "shopAddress": string,
  "shopDescription": string,
  "shopTel": string,
  "shopScore": number,
  "shopSellCount": number,
  "shopType": string,
  "shopImage": string
}
// 列表数据
const list = ref<ListItemSate[]>([]);
// 总数量
const total = ref(0)
// 分页参数
const pageConfig = reactive({
  pageCode: 1,
  pageSize: 10
})
// 搜索参数
const params = reactive({
  searchValue: '',
  type: '',
  minScore: '',
  maxScore: ''
})


// 获取数据
const _getList = async () => {
  const resp = await axios.get('/api/list', { params: { ...pageConfig, ...params } });
  const { data, totalCount } = resp.data.data
  list.value = data
  total.value = totalCount
}
_getList()


/**********************  删除  多选删除 ***********************************/
// 处理删除
const handleDelete = async (id: string) => {
  // 二次确定
  // 请求删除
  await axios.delete('/api/list', { params: { id } });
  await _getList()
  ElMessage.success('删除成功')
}
const selectItem = ref<ListItemSate[]>([])
const selectionChange = (newSelection: ListItemSate[]) => selectItem.value = newSelection

const handleDeleteSelect = () => {
  const id = selectItem.value.map(v => v.id).join(',')
  handleDelete(id)
}
/********************** 编辑 添加 ***********************************/
// isAdd true => 添加
// isAdd false => 编辑
const isAdd = ref(true)
const visible = ref(false)
const title = ref('编辑|添加')
const formDataDialog = reactive({
  id: '',
  shopName: '1',
  shopAddress: '2',
  shopDescription: '3',
  shopTel: '',
  shopScore: '',
  shopSellCount: '',
  shopType: '',
  shopImage: ''
})
const openDialog = (flag: boolean, row?: ListItemSate) => {
  // 打开弹框
  visible.value = true
  // 保存当前 添加或者编辑状态
  isAdd.value = flag;

  if (isAdd.value) {
    // 添加
    formDataDialog.shopName = ''
    formDataDialog.shopAddress = ''
    formDataDialog.shopDescription = ''
  } else {
    // 编辑
    if (row) {
      formDataDialog.id = row.id
      formDataDialog.shopName = row?.shopName
      formDataDialog.shopAddress = row?.shopAddress
      formDataDialog.shopDescription = row?.shopDescription
    }
  }
}
const closeDialog = () => visible.value = false

const handleOk = async () => {
  closeDialog();

  if (isAdd.value) {
    // 添加
    await axios.put('/api/list', formDataDialog);
  } else {
    // 编辑
    await axios.post('/api/list', formDataDialog)
  }
  await _getList()
  ElMessage.success('操作成功')
}

</script>
<style lang="scss" scoped>
.text-item {
  line-height: 50px;
}
</style>
